import React from 'react';
import {
  Divider, Table, Tag, Badge, Button
} from 'antd';
import axios from 'axios';

class HardwareTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hostList: []
    };
  }

  componentDidMount() {
    // 告警等级
    axios.get('/aiOps/alarm/level').then((res) => {
      const { data = [] } = res.data || {};
      this.setState({ level: data });
    });
    axios.get('/aiOps/alarm/type').then((res) => {
      const { data = [] } = res.data || {};
      this.setState({ type: data });
    });
  }

  sign = (param) => {
    console.log(param);
    const { tableData, refresh } = this.props;
    if (param === 'all') {
      axios.post('/aiOps/alarm/markAlarmInfo', tableData).then(() => {
        refresh();
      });
      return;
    }
    const { id } = param;
    axios.post(`/aiOps/alarm/markOneAlarmInfo/${id}`).then(() => {
      // 刷新数据
      refresh();
    });
    console.log(param);
  };

  render() {
    const { tableData, total, changePage } = this.props;

    const details = [];
    const hostList = [];

    tableData.forEach((item) => {
      details.push(item.detail);
    });

    [...new Set(details)].forEach((item) => {
      hostList.push({
        text: item,
        value: item
      });
    });

    // tableData = new Array(10000).fill(tableData[0]);

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: '6%'
      },
      {
        title: '等级',
        dataIndex: 'level',
        key: 'level',
        width: '8%',
        filters: [
          {
            text: '一般',
            value: 'DEFAULT'
          },
          {
            text: '极度紧急',
            value: 'EXTREME_URGENT'
          },
          {
            text: '紧急',
            value: 'URGENT'
          },
          {
            text: '轻微',
            value: 'LIGHT'
          }
        ],
        onFilter: (value, record) => record.level.indexOf(value) === 0,
        sorter: (a, b) => a.level.length - b.level.length,
        sortDirections: ['descend'],
        render: (val) => {
          let str = '一般';
          let status = 'processing';

          switch (val) {
            case 'EXTREME_URGENT':
              str = '极度紧急';
              status = 'error';
              break;
            case 'URGENT':
              str = '紧急';
              status = "warning";
              break;
            case 'NORMAL':
              str = '一般';
              status = "processing";
              break;
            case 'LIGHT':
              str = '轻微';
              status = "default";
              break;
            default:
              status = "default";
              str = '一般';
          }

          return (<Badge status={status} text={str} />);
        }
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        width: '8%',
        filters: [
          {
            text: '网关',
            value: 'DOCKATE'
          },
          {
            text: '服务器',
            value: 'SERVICE'
          },
          {
            text: '服务',
            value: 'SERVER'
          }
        ],
        onFilter: (value, record) => record.level.indexOf(value) === 0,
        render: (val) => {
          let str = '服务';
          switch (val) {
            case 'DOCKATE':
              str = '网关';
              break;
            case 'SERVICE':
              str = '服务';
              break;
            case 'SERVER':
              str = '服务器';
              break;
            default:
              str = '服务';
          }
          return str;
        }

      },
      {
        title: '告警次数',
        key: 'count',
        width: '8%',
        dataIndex: 'count'
      },
      {
        title: '告警内容',
        key: 'alarmMsg',
        width: '20%',
        dataIndex: 'alarmMsg'
      },
      {
        title: '备注',
        key: 'detail',
        dataIndex: 'detail',
        filters: hostList,
        filterMode: 'menu',
        width: '20%',
        filterSearch: true,
        ellipsis: true,
        onFilter: (value, record) => record.detail.includes(value)
      },
      {
        title: '最近告警时间',
        key: 'time',
        width: '12%',
        dataIndex: 'time',
        render: (val) => (
          new Date(val).toLocaleString()
        )
      },
      {
        title: '状态',
        key: 'visible',
        dataIndex: 'visible',
        width: '8%',
        filters: [
          {
            text: '已读',
            value: true
          },
          {
            text: '未读',
            value: false
          }
        ],
        onFilter: (value, record) => {
          console.log(value, record);
          return String(value) === String(record.visible);
        },
        render: (val) => {
          let str = <Tag color="green">未读</Tag>;
          if (val) {
            str = <Tag color="#CCCCCC">已读</Tag>;
          }

          return str;
        }
      },
      {
        title: '操作',
        key: 'id',
        render: (val) => (
          <>
            <Button type="link" onClick={() => this.sign(val)}>标记为已读</Button>
            {/* <Button type="link" onClick={() => this.sign('all')}>全部标记为已读</Button> */}
          </>
        )
      }
    ];

    return (
      <Table
        rowKey={(row) => row.id}
        pagination={{
          hideOnSinglePage: true,
          pageSize: 100, 
          total,
          showSizeChanger: false,
          onChange: (a, b) => {
            changePage(a);
          }
        }}
        style={{ width: '100%' }}
        columns={columns}
        dataSource={tableData}
        scroll={{ y: '600px' }}
      />
    );
  }
}

export default HardwareTable;
